<template>
  <div class="app-container">
    <div class="app-title">
      查询条件
    </div>
    <div class="filter-container clearfix">
      <div class="searchItem">
        <label>
          用户Id/姓名/手机号:
        </label>
        <el-input
          v-model="idOrNameOrMobile"
        />
      </div>
      <div class="searchItem">
        <label>
          认证进度:
        </label>
        <el-select v-model="state" placeholder="全部">
          <el-option label="入驻申请" value="1" />
          <el-option label="线上考核" value="2" />
          <el-option label="考核改卷" value="3" />
          <el-option label="预审通过" value="4" />
          <el-option label="签约" value="5" />
          <el-option label="通过" value="6" />
          <el-option label="冻结" value="7" />
          <el-option label="拉黑" value="8" />
        </el-select>
      </div>
      <div class="searchItem">
        <label>
          服务范围:
        </label>
        <el-select v-model="provinceId" placeholder="省" style="width:80px" filterable>
          <template v-for="item in provinceList">
            <el-option v-if="provinceList.length>0" :key="item.id" :label="item.name" :value="item.id" />
          </template>
        </el-select>
        <el-select v-model="cityId" placeholder="市" :disabled="provinceId===''" style="width:80px" filterable>
          <template v-for="item in cityList">
            <el-option v-if="cityList.length>0" :key="item.id" :label="item.name" :value="item.id" />
          </template>
        </el-select>
        <el-select v-model="areaId" placeholder="区" :disabled="cityId===''" style="width:100px" filterable>
          <template v-for="item in areaList">
            <el-option v-if="areaList.length>0" :key="item.id" :label="item.name" :value="item.id" />
          </template>
        </el-select>
      </div>
      <div class="searchItem">
        <label>
          入驻时间:
        </label>
        <el-date-picker
          v-model="dateTime"
          :range-separator="null"
          start-placeholder="入驻时间"
          value-format="yyyy-MM-dd%20HH:mm"
          class="search-item date-range-item"
          type="datetimerange"
        />
      </div>
      <div class="searchItem">
        <label>
          团队人数:
        </label>
        <el-select v-model="teamOrder" placeholder="全部" style="width:80px">
          <el-option value="ASC" label="升序" />
          <el-option value="DESC" label="降序" />
        </el-select>
      </div>
      <div class="searchItem">
        <el-button v-hasPermission="['ebrokerList:search']" class="searchItembtn" type="primary" @click="search">
          查询
        </el-button>
        <el-button type="success" class="searchItembtn" @click="reset">
          {{ $t("table.reset") }}
        </el-button>
      </div>
    </div>
    <!-- <div style="height:50px" /> -->
    <div class="app-title">
      经纪人列表
    </div>

    <el-table
      ref="table"
      :key="tableKey"
      v-loading="loading"
      :data="list"
      border
      fit
      style="width: 100%"
      @sort-change="sortChange"
    >
      <el-table-column
        label="用户ID"
        prop="username"
        :show-overflow-tooltip="true"
        align="center"
        min-width="120px"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="手机号"
        :show-overflow-tooltip="true"
        align="center"
        min-width="150px"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.mobile }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="真实姓名"
        :show-overflow-tooltip="true"
        align="center"
        min-width="150px"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.realName }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="团队人数(人)"
        :show-overflow-tooltip="true"
        align="center"
        min-width="150px"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.directFansNum+scope.row.indirectFansNum || 0 }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="认证进度"
        :show-overflow-tooltip="true"
        align="center"
        min-width="150px"
      >
        <template slot-scope="scope">
          <span>{{ ['','入驻申请','线上考核','考核改卷','预审通过','签约','通过','冻结','拉黑'][scope.row.state] }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="入驻时间"
        :show-overflow-tooltip="true"
        align="center"
        min-width="150px"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.enterTime }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="服务范围"
        :show-overflow-tooltip="true"
        align="center"
        min-width="150px"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.serviceRange }}</span>
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('table.operation')"
        align="center"
        min-width="150px"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="{ row }">
          <el-link
            v-hasPermission="['ebrokerList:view']"
            class="el-icon-view"
            @click="view(row)"
          >
            查看详情
          </el-link>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="pagination.pageNum"
      :limit.sync="pagination.pageSize"
      @pagination="search"
    />
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
export default {
  components: {
    Pagination
  },
  data() {
    return {
      total: 0,
      pagination: {
        pageSize: 10,
        pageNum: 1
      },
      searchForm: {
        startTime: '',
        endTime: ''
      },
      dateTime: '',
      loading: false,
      tableKey: 0,
      list: [],
      provinceId: '',
      cityId: '',
      areaId: '',
      idOrNameOrMobile: '',
      state: '',
      teamOrder: '',
      provinceList: [],
      cityList: [],
      areaList: []
    }
  },
  watch: {
    provinceId(val, old) {
      this.$get(`/web/areas/get/all/bsCity?provinceId=${val}`).then(res => {
        if (res.data.code === '0') {
          this.cityList = res.data.data
        }
      })
    },
    cityId(val, old) {
      this.$get(`/web/areas/get/all/bsArea?cityId=${val}&name=`).then(res => {
        if (res.data.code === '0') {
          this.areaList = res.data.data
        }
      })
    }
  },
  created() {
    this.$get('/web/areas/get/all/bsProvince').then(res => {
      if (res.data.code === '0') {
        this.provinceList = res.data.data
      }
    })
    this.search()
  },
  methods: {
    search(e) {
      this.loading = true
      if (e && e.page) {
        this.pagination.pageNum = e.page
        this.pagination.pageSize = e.limit
      }
      if (this.dateTime) {
        this.searchForm.startTime = this.dateTime[0]
        this.searchForm.endTime = this.dateTime[1]
        console.log(this.searchForm.startTime)
      }
      const {
        provinceId,
        cityId,
        areaId,
        teamOrder,
        state,
        idOrNameOrMobile

      } = this
      this.$get('/web/broker/list', {
        ...this.pagination,
        ...this.searchForm,
        provinceId, cityId, areaId,
        teamOrder, state,
        idOrNameOrMobile }).then(res => {
        this.loading = false
        if (res.data.code === '0') {
          this.total = res.data.data.total
          this.list = res.data.data.rows
        }
      }).catch(() => {
        this.loading = false
      })
    },
    sortChange() {},
    reset() {
      this.provinceId = ''
      this.cityId = ''
      this.areaId = ''
      this.teamOrder = ''
      this.state = ''
      this.idOrNameOrMobile = ''
      this.searchForm = {}
      this.dateTime = ''
      this.search()
    },
    view(row) {
      console.log(row)
      this.$router.push({
        name: 'ebrokerDetail',
        query: {
          id: row.id,
          invite: row.indirectFansNum ? row.indirectFansNum : 0 + row.directFansNum ? row.directFansNum : 0
        }
      })
      console.log(row)
    }
  }
}
</script>

<style>
</style>
